<!-- 商铺租赁 -->
<template>
    <div>
        <Row class="hire">
            <Col span="24">
            <Card :padding="0" :dis-hover="true" :bordered="false" class="top">
                <img src="../../assets/hire/hire01.jpg">
                <Card class="top-left" :padding="5">
                    <div class="content">
                        <div class="first">
                            <span>第一层中区</span>
                            <br>
                            <img src="../../assets/hire/hire02.png">
                                                </div>
                            <div class="adress">
                                <p><em></em>F4F4F4F4F4F4</p>
                                <p><s></s>租区面积：150/m2</p>
                            </div>
                        </div>
                </Card>
            </Card>
            </Col>
        </Row>
        <Row :gutter="16">
            <Col span="8">
            <Card :padding="0" :dis-hover="true" :bordered="false" class="bottom-left">
                <img src="../../assets/hire/hire03.jpg">
                <div class="middle">
                    <span>F1</span>
                </div>
            </Card>
            </Col>
            <Col span="8" class="bottom-middle">
            <Card :padding="0" :dis-hover="true" :bordered="false" class="middle-top">
                <img src="../../assets/hire/hire04.jpg">
                <div class="middle">
                    <span>F2</span>
                </div>
            </Card>
            <Card :padding="0" :dis-hover="true" :bordered="false" class="middle-bottom">
                <img src="../../assets/hire/hire06.jpg">
                <div class="middle">
                    <span>F3</span>
                </div>
            </Card>
            </Col>
            <Col span="8">
            <Card :padding="0" :dis-hover="true" :bordered="false" class="bottom-right">
                <img src="../../assets/hire/hire05.jpg">
                <div class="font">
                    <p><em></em>F4F4F4F4F4F4</p>
                    <p><s></s>租区面积：150/m2</p>
                </div>
            </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {

}
</script>
<style scoped lang="less">
.hire {
    margin-bottom: 15px;

    img {
        max-width: 100%;
        height: 100%;
    }

    .top {
        height: 400px;
        position: relative;

        .top-left {
            position: absolute;
            top: 25px;
            right: 35px;
            background-color: rgba(0, 0, 0, 0);

            .content {
                width: 500px;
                height: 330px;
                background-color: rgba(12, 10, 8, 0.7);

                .first {
                    text-align: center;

                    span {
                        font: 30px/75px "Microsoft YaHei";
                        color: #fff;
                    }
                }

                .adress {
                    p {
                        font: 18px/30px "Microsoft YaHei";
                        color: #fff;

                        em {
                            width: 25px;
                            height: 30px;
                            margin-right: 25px;
                            background: url(../../assets/hire/adress.png);
                            float: left;
                        }

                        s {
                            width: 25px;
                            height: 30px;
                            margin-right: 25px;
                            background: url(../../assets/hire/acreage.png);
                            float: left;
                        }
                    }
                }
            }
        }
    }
}

.bottom-left {
    position: relative;

    img {
        max-width: 100%;
    }

    .middle {
        width: 80%;
        height: 60px;
        background-color: rgba(23, 19, 12, 0.7);
        text-align: center;
        position: absolute;
        top: 40%;
        left: 10%;

        span {
            font: 40px/60px "Microsoft YaHei";
            color: #fff;
        }
    }
}

.bottom-middle {

    img {
        max-width: 100%;
    }

    .middle-top {
        margin-bottom: 10px;
        .middle {
        width: 80%;
        height: 60px;
        background-color: rgba(23, 19, 12, 0.7);
        text-align: center;
        position: absolute;
        top: 40%;
        left: 10%;

        span {
            font: 40px/60px "Microsoft YaHei";
            color: #fff;
        }
    }
    }
    .middle-bottom {

        .middle {
        width: 80%;
        height: 60px;
        background-color: rgba(23, 19, 12, 0.7);
        text-align: center;
        position: absolute;
        top: 40%;
        left: 10%;

        span {
            font: 40px/60px "Microsoft YaHei";
            color: #fff;
        }
    }
    }
}

.bottom-right {
    position: relative;

    img {
        max-width: 100%;
    }

    .font {
        width: 80%;
        position: absolute;
        top: 40%;
        left: 10%;

        p {
            font: 18px/30px "Microsoft YaHei";
            color: #fff;

            em {
                width: 25px;
                height: 30px;
                margin-right: 25px;
                background: url(../../assets/hire/adress.png);
                float: left;
            }

            s {
                width: 25px;
                height: 30px;
                margin-right: 25px;
                background: url(../../assets/hire/acreage.png);
                float: left;
            }
        }

    }
}
</style>